<template>

    <div class="sidebar-container" :class="classObj">
        <!-- <button></button> -->
        <el-menu router :default-active="route.path" class="el-menu-vertical-demo" :collapse="store.hideSidebar"
            @open="handleOpen" @close="handleClose">
            <!-- <Tree v-for="route in sidebarRoutes" :key="route.path" :item="route" resolve="/">

            </Tree> -->
            <Tree2 v-for="route in routes" :key="route.path" :item="route" resolve="/">

            </Tree2>

            <!-- <el-menu-item index="home">
                <template #title>
                    <el-icon>
                        <setting />
                    </el-icon>
                    {{ item }}
                </template>
            </el-menu-item>
            <el-menu-item index="other">
                <template #title>
                    <el-icon>
                        <setting />
                    </el-icon>
                    {{ item }}
                </template>
            </el-menu-item> -->

            <!-- <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>Navigator One</span>
                </template>
                <el-menu-item-group>
                    <template #title><span>Group One</span></template>
                    <el-menu-item index="1-1">item one</el-menu-item>
                    <el-menu-item index="1-2">item two</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="Group Two">
                    <el-menu-item index="1-3">item three</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                    <template #title><span>item four</span></template>
                    <el-menu-item index="1-4-1">item one</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <el-icon>
                    <document />
                </el-icon>
                <template #title>Navigator Three</template>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>Navigator Four</template>
            </el-menu-item> -->
        </el-menu>

    </div>
</template>


<script  setup>
import { reactive, ref, watch } from 'vue';
import { useStore } from '@/store'
import { storeToRefs } from 'pinia'
// import {
//     Document,
//     Menu as IconMenu,
//     Location,
//     Setting,
// } from '@element-plus/icons-vue'
import { sidebarRoutes, routes } from '@/router'
// import Tree from './components/Tree.vue'
import Tree2 from '@/components/Tree2.vue'
// import { watch } from 'fs';
import { useRoute } from 'vue-router'

const route = useRoute()
const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    // console.log(key, keyPath)
}
const store = useStore()
const { hideSidebar } = storeToRefs(store)

const show = ref(true)
const check = () => {
    console.log(show.value)
    show.value = !show.value
}

let classObj = reactive({
    hideSidebar:
        hideSidebar,

    success: show.value
})
watch(() => route.path, () => {
    console.log('sidebar路由修改');
})
</script>
<!-- <script>
export default {
    name: "Sidebar"
}
</script> -->
<style lang="scss" scoped>
.sidebar-container {
    // width: 480px;
    background-color: skyblue;

    &.hideSidebar {
        // width: 280px !important;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

}
</style>